<template>
  <view class="parking-fee">
    <!-- 车位信息 -->
    <view class="parking-info">
      <view class="section-title">车位信息</view>
      <view class="parking-select" @tap="showParkingSelect">
        <text>{{ selectedParking?.number || '请选择车位' }}</text>
        <text class="arrow">></text>
      </view>
      <view class="car-info" v-if="selectedParking">
        <view class="info-item">
          <text>车牌号码</text>
          <text>{{ selectedParking.carNumber }}</text>
        </view>
        <view class="info-item">
          <text>车位类型</text>
          <text>{{ selectedParking.type }}</text>
        </view>
        <view class="info-item" v-if="selectedParking.expireDate">
          <text>到期时间</text>
          <text>{{ selectedParking.expireDate }}</text>
        </view>
      </view>
    </view>

    <!-- 缴费方式 -->
    <view class="payment-type">
      <view class="section-title">缴费方式</view>
      <view class="type-options">
        <view class="type-item" 
              v-for="(type, index) in paymentTypes" 
              :key="index"
              :class="{ active: selectedType === type.value }"
              @tap="selectType(type.value)">
          <text>{{ type.label }}</text>
          <text class="price">{{ type.price }}元</text>
        </view>
      </view>
    </view>

    <!-- 费用明细 -->
    <view class="fee-detail" v-if="selectedParking && selectedType">
      <view class="section-title">费用明细</view>
      <view class="detail-list">
        <view class="detail-item">
          <text>停车费</text>
          <text>¥{{ fee }}</text>
        </view>
        <view class="detail-item" v-if="selectedType !== 'temp'">
          <text>服务时长</text>
          <text>{{ getServiceDuration() }}</text>
        </view>
      </view>
    </view>

    <!-- 缴费按钮 -->
    <view class="button-group">
      <button class="pay-button" 
              @tap="handlePayment" 
              :disabled="!selectedParking || !selectedType">
        立即缴费 ¥{{ fee }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedParking: null,
      selectedType: '',
      paymentTypes: [
        { value: 'month', label: '月卡', price: 300 },
        { value: 'quarter', label: '季卡', price: 800 },
        { value: 'year', label: '年卡', price: 3000 }
      ],
      loading: false
    }
  },
  computed: {
    fee() {
      const type = this.paymentTypes.find(t => t.value === this.selectedType)
      return type ? type.price : 0
    }
  },
  methods: {
    async showParkingSelect() {
      if (this.loading) return
      this.loading = true
      
      try {
        const res = await this.$api.getParkingList()
        const parkingList = res.data.map(item => item.number)
        
        if (parkingList.length === 0) {
          uni.showToast({
            title: '暂无可用车位',
            icon: 'none'
          })
          return
        }
        
        uni.showActionSheet({
          itemList: parkingList,
          success: (res) => {
            this.selectedParking = res.data[res.tapIndex]
            this.getParkingInfo()
          }
        })
      } catch (error) {
        uni.showToast({
          title: '获取车位列表失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    async getParkingInfo() {
      try {
        const res = await this.$api.getParkingInfo({
          number: this.selectedParking.number
        })
        this.selectedParking = {
          ...this.selectedParking,
          ...res.data
        }
        
        if (this.selectedType === 'temp') {
          this.getTempParkingFee()
        }
      } catch (error) {
        uni.showToast({
          title: '获取车位信息失败',
          icon: 'none'
        })
      }
    },
    async getTempParkingFee() {
      try {
        const res = await this.$api.getTempParkingFee({
          number: this.selectedParking.number
        })
        const tempType = this.paymentTypes.find(t => t.value === 'temp')
        if (tempType) {
          tempType.price = res.data.fee || 0
        }
      } catch (error) {
        uni.showToast({
          title: '获取临时停车费用失败',
          icon: 'none'
        })
      }
    },
    selectType(type) {
      this.selectedType = type
      
      if (type === 'temp' && this.selectedParking) {
        this.getTempParkingFee()
      }
    },
    async handlePayment() {
      try {
        uni.showModal({
          title: '确认支付',
          content: `确定支付${this.fee}元${this.getPaymentTypeLabel()}费用吗？`,
          success: async (res) => {
            if (res.confirm) {
              await this.processPayment()
            }
          }
        })
      } catch (error) {
        uni.showToast({
          title: '创建支付订单失败',
          icon: 'none'
        })
      }
    },
    async processPayment() {
      if (this.loading) return
      this.loading = true
      
      try {
        const res = await this.$api.createPayment({
          type: 'parking',
          parking: this.selectedParking.number,
          paymentType: this.selectedType,
          amount: this.fee
        })
        
        uni.requestPayment({
          ...res.data,
          success: () => {
            uni.showToast({ 
              title: '支付成功',
              icon: 'success'
            })
            setTimeout(() => uni.navigateBack(), 1500)
          },
          fail: (err) => {
            console.error('支付失败', err)
            uni.showToast({
              title: '支付失败',
              icon: 'none'
            })
          },
          complete: () => {
            this.loading = false
          }
        })
      } catch (error) {
        console.error('创建支付订单失败', error)
        uni.showToast({
          title: '创建支付订单失败',
          icon: 'none'
        })
        this.loading = false
      }
    },
    getPaymentTypeLabel() {
      const type = this.paymentTypes.find(t => t.value === this.selectedType)
      return type ? type.label : ''
    },
    getServiceDuration() {
      switch(this.selectedType) {
        case 'month': return '1个月';
        case 'quarter': return '3个月';
        case 'year': return '12个月';
        default: return '';
      }
    }
  }
}
</script>

<style lang="scss">
.parking-fee {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.parking-info, .payment-type, .fee-detail {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(106, 17, 203, 0.1);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  color: #6a11cb;
}

.parking-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eee;
}

.car-info {
  margin-top: 20rpx;
  .info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;
    color: #666;
  }
}

.type-options {
  display: flex;
  justify-content: space-between;
  
  .type-item {
    flex: 1;
    margin: 0 10rpx;
    padding: 20rpx;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    
    &.active {
      border-color: #6a11cb;
      color: #6a11cb;
      background-color: rgba(106, 17, 203, 0.05);
    }
    
    .price {
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #6a11cb;
    }
  }
}

.fee-detail {
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .detail-list {
    .detail-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;
      padding: 10rpx 0;
      
      &:not(:last-child) {
        border-bottom: 1px solid #f5f5f5;
      }
    }
  }
}

.button-group {
  padding: 0 20rpx;
  margin-bottom: 120rpx;
}

.pay-button {
  position: fixed;
  bottom: 40rpx;
  left: 20rpx;
  right: 20rpx;
  background: linear-gradient(135deg, #6a11cb 0%, #8e44ad 100%);
  color: #fff !important;
  border-radius: 12rpx;
  padding: 20rpx;
  text-align: center;
  font-size: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(106, 17, 203, 0.3);
  transition: all 0.3s ease;
  
  &:disabled {
    background: #ccc;
    box-shadow: none;
  }
  
  &:active {
    opacity: 0.8;
    transform: translateY(2rpx);
  }
}

.arrow {
  color: #6a11cb;
}
</style> 